import React from "react";
import { useArray, useMount } from "utils";

export interface User {
  name: string;
  age: number;
}

const TryUseArray = () => {
  const persons: User[] = [
    { name: "jack", age: 25 },
    { name: "ma", age: 22 },
  ];

  const { value, clear, removeIndex, add } = useArray(persons);

  useMount(() => {
    // 期待这里报错：类型“User[]”上不存在属性“notExist”
    // console.log(value.notExist);
    // 期待这里报错：类型 "{ name: string; }" 中缺少属性 "age"，但类型 "User" 中需要该属性
    // add({ name: "david" });
    // 期待这里报错：类型“string”的参数不能赋给类型“number”的参数
    // removeIndex("123");
  });

  return (
    <div>
      {/* 点击增加 john */}
      <button onClick={() => add({ name: "john", age: 23 })}>add john</button>
      {/* 点击删除第一项 */}
      <button onClick={() => removeIndex(0)}>remove 0</button>
      {/* 点击清空列表 */}
      <button style={{ marginBottom: "50px" }} onClick={() => clear()}>
        clear
      </button>
      {value.map((person: User, index: number) => (
        <div key={index} style={{ marginBottom: "30px" }}>
          <span style={{ color: "red" }}>{index}</span>
          <span>{person.name}</span>
          <span>{person.age}</span>
        </div>
      ))}
    </div>
  );
};

export default TryUseArray;
